<template>
  <div class="table">
    <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  </div>
</template>

<script>
import CommHead from './CommHead'
    export default {
        data () {
		    return {
		      msg: 'Welcome to Your Vue.js App'
		    }
		},
		mounted(){
		    this.drawLine();
		},
		methods: {
		    drawLine(){
		        // 基于准备好的dom，初始化echarts实例
		        let myChart = this.$echarts.init(document.getElementById('myChart'))
		        // 绘制图表
		        myChart.setOption({
		            tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    series: [
				        {
				            name:'查看等级',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '40',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:80, name:'当前经验'},
				                {value:20, name:'升级所需经验'}
				            ]
				        }
				    ]
		        });
		    }
        }
}
</script>

<style scoped>
.table{
  width: 100%;
  background-color: white;
}
#myChart{
  margin: 0 auto;
}
</style>